<template>
	<view class="apps">
		<view class="flex fdc plr20" v-if="list.length >0">
			<view class="coupon-item flex" v-for="(item,index) in list" :key="index">
				<view class="box-con">
					<view class="box-text">可叠加</view>
				</view>
				<view class="coupon-money" >
					<view class="layof">
						<text style="font-size: 30px;">￥</text>
						<text style="font-size: 40px;">10</text>
						<view class="demand">洗车抵扣券</view>
					</view>
				</view>
				<view class="coupon-detail">
					<view style="margin-bottom: 12rpx;">
						<text style="margin-right: 4px;background: linear-gradient(132deg, #C11920 0%, #EE2626 100%);color: #fff;float: left;border-radius: 4px;font-size: 13px;padding: 4px 8px;">中国石油发放</text>
					</view>
					<text style="font-size: 12px;color: #333333;" class="coupon-title">地平线便民服务使用</text>
					<view class="x-bc" style="margin:0 20rpx 12rpx 0;"><text style="font-size: 12px;
						color: #666666;">{{formatTime(item.create_time)}}&nbsp;领取</text></view>
					<!-- 印章效果 -->
					<view class="seal" style="position: absolute;right: 10rpx;bottom: 10rpx;" v-if="item.gift_status ==2">
						<view class="seal-son">
							<span style="position: absolute;top: 40rpx;text-align: center;font-size: 35rpx;transform: rotate(-12deg);left: 8rpx;color: #D2D2D2;font-weight: 900;">已使用</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<uv-empty icon="empty-page"></uv-empty>
		</view>
	</view>
</template>

<script>
	import { util } from '/common/util.js';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	let app;
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			app = this;
			this.getList();
		},
		methods: {
			formatTime(e){
				return timeFormat(e*1000,'yyyy-mm-dd hh:MM');
			},
			getList(){
				util.request({
					url:'/mpuser/gift',
				}).then((res)=>{
					if(res.code == 1){
						app.list = res.data;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.selectimg {
			width: 40rpx;
			height: 40rpx;
		}
	
		.graybgRight {
			background-color: #F5F4F5;
		}
	
		.graybg {
			background: linear-gradient(132deg, #D2D2D2 0%, #D2D2D2 100%) !important;
			;
		}
	
		.coupon-item {
			height: 110px;
			border-radius: 10upx;
			margin-top: 22upx;
			border: 1px solid #FFFFFF;
			position: relative;
			background-color: #FFFFFF;
	
			.coupon-money {
				display: flex;
				justify-content: center;
				flex-direction: column;
				text-align: center;
				width: 232upx;
				height: 100%;
				border-style: none dotted none none;
				border-color: #eeeeee;
				background: linear-gradient(132deg, #C11920 0%, #EE2626 100%);
				/* background: ; */
	
				.layof {
					font-weight: 400;
					color: #FFFFFF;
					margin-bottom: 6px;
				}
	
				.demand {
					font-size: 12px;
					color: #FFFFFF;
				}
	
	
			}
	
	
			.box-con {
				width: 85px;
				height: 88px;
				overflow: hidden;
				position: absolute;
				top: -3px;
				right: -3px;
	
				.box-text {
					font-size: 12px;
					color: white;
					text-align: center;
					-webkit-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					position: relative;
					padding: 2px 0;
					left: 37px;
					top: 4px;
					width: 65px;
					background-color: #EE2626;
					background-image: -webkit-gradient(linear, left top, left bottom, from(#ff503e), to(#ff2f50));
					background-image: -webkit-linear-gradient(top, #ff503e, #ff2f50);
					background-image: -moz-linear-gradient(top, #ff503e, #ff2f50);
					background-image: -ms-linear-gradient(top, #ff503e, #ff2f50);
					background-image: -o-linear-gradient(top, #ff503e, #ff2f50);
					-webkit-box-shadow: 0px 0px 3px #ff1b40;
					-moz-box-shadow: 0px 0px 3px #ff1b40;
					box-shadow: 0px 0px 3px #ff1b40;
	
					&:before,
					:after {
						content: "";
						position: absolute;
						bottom: -3px;
					}
	
					&:before {
						left: 0;
					}
	
					&:after {
						right: 0;
					}
	
				}
			}
	
	
		}
	
		.coupon-detail {
			display: flex;
			flex: 1;
			justify-content: center;
			flex-direction: column;
			text-align: left;
			padding-left: 20px;
			height: 100%;
	
			.coupon-title {
				
			}
		}
	
		.coupon-item:after {
			width: 40upx;
			height: 20upx;
			position: absolute;
			left: 212upx;
			top: -1px;
			border-radius: 0 0 40upx 40upx;
			content: "";
			display: block;
			background: #F5F5F7;
			border: 1px solid #eeeeee;
			border-top: 0px;
		}
	
		.coupon-item:before {
			width: 40upx;
			height: 20upx;
			position: absolute;
			left: 212upx;
			bottom: -1px;
			border-radius: 40upx 40upx 0 0;
			content: "";
			display: block;
			background: #F5F5F7;
			border: 1px solid #eeeeee;
			border-bottom: 0px;
		}
	
		.seal {
			width: 140rpx;
			height: 140rpx;
			border: solid 6rpx #D2D2D2;
			border-radius: 100%;
			background-color: #F5F4F5;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.seal-son {
			width: 125rpx;
			height: 125rpx;
			border: solid 2rpx #D2D2D2;
			border-radius: 100%;
			background-color: #F5F4F5;
			position: relative;
		}
</style>